<script lang="ts" setup name="NavigationBar">
  import { computed, reactive } from 'vue';
  // import { useRouter } from 'vue-router';
  import { useAppStore } from '/@/store/modules/app';
  import { useUserStore } from '/@/store/modules/user';
  import { UserFilled } from '@element-plus/icons-vue';
  import BreadCrumb from '../BreadCrumb/index.vue';
  import Hamburger from '../Hamburger/index.vue';

  // const router = useRouter();
  const appStore = useAppStore();
  const userStore = useUserStore();

  const userName = computed(() => {
    return userStore.user.name || '未登录';
  });

  const sidebar = computed(() => {
    return appStore.sidebar;
  });

  const state = reactive({
    toggleSideBar: () => {
      appStore.toggleSidebar(false);
    },
    logout: () => {
      userStore.logout();
      window.location.href = window.location.href = import.meta.env.VITE_APP_REDIRECT_AUTH;
      // router.push('/login').catch((err) => {
      //   console.warn(err);
      // });
    }
  });
</script>

<template>
  <div class="navbar">
    <Hamburger :is-active="sidebar.opened" class="hamburger" @toggle-click="state.toggleSideBar" />
    <BreadCrumb class="breadcrumb" />
    <div class="right-menu">
      <el-dropdown class="right-menu-item">
        <span class="user-name-wrapper">
          <el-avatar :icon="UserFilled" :size="34" />
          {{ userName }}
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="state.logout">
              <span style="display: block">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .navbar {
    height: var(--g-navigationbar-height);
    overflow: hidden;
    background: #fff;

    .hamburger {
      display: flex;
      float: left;
      height: 100%;
      padding: 0 15px;
      cursor: pointer;
      align-items: center;
    }

    .breadcrumb {
      float: left;
    }

    .right-menu {
      display: flex;
      float: right;
      height: 100%;
      margin-right: 10px;
      color: #606266;
      align-items: center;

      .user-name-wrapper {
        display: flex;
        align-items: center;
      }

      .el-avatar {
        margin-right: 5px;
      }

      .right-menu-item {
        padding: 0 10px;
        cursor: pointer;
      }
    }
  }
</style>
